<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-05 19:16:08
-->
<template>
    <div class="logins">
        <!-- 未登录头像 -->
        <div class="avater" @click="showLogin" v-if="!user.userInfo">
            <div class="block">
                <el-avatar :size="40" :src="circleUrl"></el-avatar>
            </div>
            <div class="uname">{{ uname }}</div>
        </div>

        <!-- 已登录头像 -->
        <div class="avater" v-else>
            <div class="avat" @click="gotoUserDetail">
                <img :src="user.userInfo.avatarUrl" alt="">
            </div>
            <div class="uname" @click="showUserPop" id="showuserpop">{{ user.userInfo.nickname }}</div>
        </div>

        <!-- 登录表单弹框 -->
        <transition enter-active-class="animate__animated animate__fadeIn"
            leave-active-class="animate__animated animate__fadeOut">
            <LoginPop v-if="isShowLogin" @closeLogin="closeLogin"></LoginPop>
        </transition>

        <!-- 用户个人信息框 -->
        <UserPop v-if="isShowUserPop" @closeuserPop="showUserPop"></UserPop>
    </div>
</template>

<script setup>
import 'animate.css';
import { ref } from 'vue';
import { useUserStore } from '@/store/user.js'
import { useRouter } from 'vue-router'
import LoginPop from '@/components/content/login/LoginPop.vue' 
import UserPop from '@/components/content/login/UserPop.vue'

//声明用户仓库
const user = useUserStore()
const router = useRouter()

//初始化头像和登录提示信息
let circleUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
let uname = ref('点击头像登录')
let isShowLogin = ref(false)
let isShowUserPop = ref(false)

//前往用户个人主页
function gotoUserDetail() {
    router.push({
        name: 'UserDetail',
        params: {
            uid: user.userInfo.userId
        }
    })
}

//展示用户信息框
function showUserPop() {
    isShowUserPop.value = !isShowUserPop.value
}

//展示登录框
function showLogin() {
    isShowLogin.value = true
}

// 关闭登录框
function closeLogin() {
    isShowLogin.value = false;
}
</script>

<style lang="scss" scoped>
.logins {
    margin: 0 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    .avater {
        display: flex;
        align-items: center;
        color: #fff;
        cursor: pointer;

        .avat {
            height: 40px;
            width: 40px;

            img {
                height: 100%;
                width: 100%;
                border-radius: 50%;
            }
        }

        .uname {
            padding-left: 5px;
        }
    }
}
</style>